<!--
  额度转换
  Jay  2018-12-14
-->
<template>
  <div class="conversion">
  	<Row>
      <Col span="14">
      	<h3 class="conversion_title">目前额度</h3>
				<Table border :columns="tabInfo" :data="tabData"></Table>
      </Col>
      <Col span="8" offset="2">
      	<h3 class="conversion_title">额度转换</h3>
      	<div class="conversion_handle">
	      	<Form label-position="left" :label-width="100">
		        <FormItem label="转出：">
		        	<Select v-model="rollOut" @on-change="rollOutFun">
					      <Option :value="0" :key="0">现金余额</Option>
					      <Option v-for="(item,index) in gameList" :value="index+1" :key="index+1">{{item.game_name}}</Option>
					    </Select>
		        </FormItem>
		        <FormItem label="转入：">
		        	<Select v-model="rollIn" @on-change="rollInFun">
					      <Option :value="0" :key="0">现金余额</Option>
					      <Option v-for="(item,index) in gameList" :value="index+1" :key="index+1">{{item.game_name}}</Option>
					    </Select>
		        </FormItem>
		        <FormItem label="数额：">
		          <InputNumber :min='0' v-model="rollNum"></InputNumber>
		        </FormItem>
		        <FormItem>
		          <Button type="primary" :loading="submitLoad" :disabled="submitLoad" @click="submit">提交订单</Button>
		        </FormItem>
			    </Form>
		    </div>
      </Col>
    </Row>
  	
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data: function() {
    return {
      tabInfo:[
      	{
      		title:'账户',
      		key:'name'
      	},
      	{
      		title:'余额',
      		key:'money',
      		render: (h, params) => {
      			let vm = this;
      			if(params.index==1){
      				return h('div', [
                h('span',this.tabData[params.index].money+'元'),
              ]);
      			}else if(params.index==0){
        			return h('div', [
                h('span',this.tabData[params.index].money+'元'),
                h('Button', {
                	style:{
                		float: params.index==0?'':'right',
                    marginLeft: params.index==0?'20px':'',
                    
                	},
                  props: {
                    type: 'primary',
                    size: 'small',
                    loading: this.loadingBtn,
                  },
                  on:{
                  	click: () => {
                  		let vm = this;
                  		if(params.index==0){
                              //刷新操作
                            this.loadingBtn=true
                  			this._getGameList(1);
                  		}else{
                  			//跳转页面
									      this.toGame(this.tabData[params.index].url);
                  		}
                      // console.log(this.tabData[params.index])
                  	}
                  }
                },this.tabData[params.index].btnTxt?this.tabData[params.index].btnTxt:'进入游戏')
              ]);	
      			}else{
              return h('div', [
                h('span',this.tabData[params.index].money+'元'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small',
                    loading: this.submitLoad,
                  },
                  style:{
                    float: 'right'
                  },
                  on:{
                  	click: () => {
                  		this.rollAll(params.row.game_plat_id)
                  	}
                  }
                },'一键转入'),
                h('Button', {
                	style:{
                		float: params.index==0?'':'right',
                    marginLeft: params.index==0?'20px':'',
                    
                	},
                  props: {
                    type: 'primary',
                    size: 'small',
                    loading: this.loadingBtn,
                  },
                  on:{
                  	click: () => {
                  		let vm = this;
                  		if(params.index==0){
                              //刷新操作
                            this.loadingBtn=true
                  			this._getGameList(1);
                  		}else{
                        //跳转页面
                        console.log('this.tabData', this.tabData)
									      this.toGame(this.tabData[params.index].game_flag);
                  		}
                      // console.log(this.tabData[params.index])
                  	}
                  }
                },this.tabData[params.index].btnTxt?this.tabData[params.index].btnTxt:'进入游戏')
              ]);	
            }
          }
      	},
      ],
      fixData:[		//表格数据
      	{
      		name: '总余额',
      		money: '',
      		btnTxt: '刷新'
      	},
      	{
      		name: '现金余额',
      		money: ''
      	}
      ],
      gameList:[],	//表格中第三方游戏平台列表
      rollOut: 0, //转出
      rollIn: null,   //转入
      rollNum:null,	//金额
      submitLoad:false,
      token: localStorage.getItem('token'),
      loadingBtn: false,
      cash: 0,
    };
  },
  computed:{
    ...mapGetters([
        'userInfo',
        'accountData'
    ]),
    tabData(){
    	//表格的总数据
      let game = [];
      for(let i=0;i<this.gameList.length;i++){
        let obj = {};
        obj.name = this.gameList[i].game_name;
        obj.money = parseFloat(this.gameList[i].balance)
        if(_.isNaN(obj.money)){
          obj.money = 0
        }
        obj.game_plat_id = this.gameList[i].game_plat_id
        obj.game_flag = this.gameList[i].game_flag
        
        game.push(obj);
      }
    	return this.fixData.concat(game);
    },
  },
  created() {
    this._getGameList(1);
  	// this.tabData = this.fixData.concat(this.gameList);
      // this.tabData = this.fixData + this.gameList;
  },
  methods: {
    ...mapActions([
      'SET_ACCOUNT_DATA'
    ]),
    _getGameList(id){
      //获取游戏分类及列表
      let vm = this;
      let dataMess = {};
      dataMess.token = vm.token;
      dataMess.game_plat_id=id
      // if(id == 1){
      // }else if(id == undefined){
      //   dataMess.game_plat_id=1    
      // }
      // if(id){
      //   dataMess.game_plat_id = id;
      // }else{
      //   dataMess.game_plat_id = 1;
      // }
      vm.$http.post(this.urlRequest + "?m=api&c=game&a=getGamePlatForAmtLimit", dataMess).then((res)=> {
          res=res.data
        if(res.status ==0){
          vm.fixData[0].money = res.data.balance_count;
          vm.fixData[1].money = res.data.balance_usable;
          // var obj = this.accountData
          // obj.money_usable=res.data.balance_usable
          // vm.SET_ACCOUNT_DATA({
          //     Obj: obj
          //   });
          this.cash=res.data.balance_usable
          // if(dataMess.game_plat_id!=1){
          //   for(let i=0;i<vm.gameList.length;i++){
          //     if(vm.gameList[i].game_plat_id==id){
          //       for(var j=0;j<res.data.plat_list.length;j++){
          //         if(res.data.plat_list[j].game_plat_id==id){
          //           // vm.gameList[i] = res.data.plat_list[j];
          //           vm.$set(vm.gameList,[i],res.data.plat_list[j])
          //         }
          //       }
          //     }
          //   }
          // }else{
            vm.gameList = res.data.plat_list;
          // }
        }else{
          vm.$Message.error({
            content:res.ret_msg,
          });
        }
        this.loadingBtn=false
      })
    },
    rollOutFun(){
      if(this.rollOut==0){
        if (this.rollIn == 0) {
          this.rollIn = 1;
        }
      } else {
        this.rollIn = 0;
      }
    },
    rollInFun(){
      if(this.rollIn==0){
        if (this.rollOut == 0) {
          this.rollOut = 1;
        }
      } else {
        this.rollOut = 0;
      }
    },
    submit(){
    	let vm = this;
    	let dataMess = {};
      dataMess.token = vm.token;
      dataMess.money = vm.rollNum;
      let thisRoll = vm.rollIn;
      if(vm.rollIn == 0){
        //下分
        dataMess.type = 2;
        thisRoll = vm.rollOut;
      }else{
        //上分
        dataMess.type = 1;
        thisRoll = vm.rollIn;
        if(vm.fixData[1].money == 0){
          vm.$Message.error({
            content:'现金余额不足'
          });
          return false;
        }
      }
      if(vm.rollNum==null||isNaN(vm.rollNum)){
        vm.$Message.error({
          content:'请输入正确的转账金额'
        });
        return false;
      }
      for(let i=0;i<vm.gameList.length;i++){
        if(i == thisRoll-1){
          dataMess.game_plat_id = vm.gameList[i].game_plat_id;
        }
      }
      vm.submitLoad = true;
      vm.$http.post(this.urlRequest + "?m=api&c=game&a=transfer", dataMess).then((res)=> {
        res=res.data
        vm.submitLoad = false;
        if(res.status ==0){
          vm.$Message.success({
            content:res.ret_msg,
          });
          vm.rollNum = null;
          this._getGameList(dataMess.game_plat_id);
        }else{
          vm.$Message.error({
            content:res.ret_msg,
          });
        }
      })
    },
    rollAll(id){
      //一键转入
      let vm = this;
      if(vm.submitLoad){
        return false;
      }
      if(vm.fixData[1].money == 0){
        vm.$Message.error({
          content:'现金余额不足'
        });
        return false;
      }
      if(vm.cash==null||isNaN(vm.cash)){
        vm.$vux.toast.show({
          text: '请输入正确的转账金额'
        });
        return false;
      }
      let dataMess = {};
      dataMess.token = vm.token;
      dataMess.money = vm.cash;
      dataMess.type = 1;
      dataMess.game_plat_id = id;
      vm.submitLoad = true;
      vm.$http.post(this.urlRequest + "?m=api&c=game&a=transfer", dataMess).then((res)=> {
        vm.submitLoad = false;
        if(res.data.status ==0){
          this._getGameList(dataMess.game_plat_id);
        } else {
          vm.$Message.error({
            content:res.data.ret_msg,
          });
        }
      })
    },
    toGame(plat_flag) {
      this.$http.post(this.urlRequest + "?m=api&c=game&a=getGameUrl", {plat_flag: plat_flag,token: this.token}).then((res)=> {
        if(res.data.ret_msg){
        this.$Message.info(res.data.ret_msg);

        }
        if(res.data.status ==0){
          let w =  window;
          let _w = window;
          let w_lottery = window;
          let style = 'width=1270px, height=950px, scrollbars=yes';
          if (w != w.parent) {
            w = w.parent == w.parent.parent ? w.parent : w.parent.parent;
          }
          w_lottery = w.open(res.data.data.gameUrl, 'game_window', style);
          w_lottery.focus();
        }
      })
    },
      
  },
  watch: {
  	tabData(){
      if(this.rollIn!=0){
        this.rollIn = 1;
      }
    },
  },
  components: {
    
  },
}
</script>
<style scoped>
 .conversion{
 	  padding: 20px 23px;
 }
 .conversion_title{
 	margin-bottom: 14px;
 }
 .conversion_handle{
 	border: 1px solid #e8eaec;
 	/* /deep/.ivu-form-item{
 		padding: 10px;
 		margin-bottom: 0;
 	}
 	/deep/.ivu-form-item + .ivu-form-item{
 		border-top: 1px solid #e8eaec;
 	}
 	/deep/.ivu-input-number{
 		width: 100%;
 	} */
 }
</style>
<style>
.conversion_handle .ivu-form-item{
    padding: 10px;
    margin-bottom: 0;
    border-top: 1px solid #e8eaec;
}
.conversion_handle .ivu-form-item:first-child{
    border: 0px;
}
.conversion .ivu-table-cell div{display: flex;justify-content: space-between;align-items: center;}
</style>



// WEBPACK FOOTER //
// src/components/topUpCenter/moneyTransform/moneyTransform.vue